<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../../static/css/note.css">
    <title>笔记</title>
</head>

<body>
    <header>
        <h1>{{ request.session.user.username }} 的笔记</h1>
        <a href="/note/add">添加新笔记</a>
        <a href="/">返回主页</a>
    </header>
    <div class="table_fu">
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>标题</th>
                    <th>用户</th>
                    <th class="prominent">内容</th>
                    <th>创建时间</th>
                    <th>修改时间</th>
                    <th>删除</th>
                    <th>修改</th>
                </tr>
            </thead>
            <tbody>
                <!-- 第一行 -->
                {% for note in page %}
                <!-- 通过视图函数传过来的page变量进行遍历得到数据, 或者通过page.object_list得到数据 -->
                <tr>
                    <td>{{note.id}}</td>
                    <td>{{note.titles}}</td>
                    <td>{{note.user}}</td>
                    <td>{{note.content}}</td>
                    <td>{{note.create_time}}</td>
                    <td>{{note.modify_time}}</td>
                    <td><a href="/note/del/{{note.id}}">删除</a></td>
                    <td><a href="/note/mod/{{note.id}}">修改</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <!-- 上一页按钮功能-->
        {% if page.has_previous %}
        <a href="/note/list/?page={{page.previous_page_number}}">上一页</a>
        {% else %}
        上一页
        {% endif %}

        <!-- 显示页号, page_range是父类继承下来的对象 -->
        {% for p in pagin.page_range %}

        <!-- 判断当前页码是否对应显示的页面,是则不加a标签超链接,直接显示, 否则显示超链接 -->
        {% if p == page.number %}
        {{p}}

        {% else %}
        <a href="/note/list/?page={{p}}">{{p}}</a>
        {% endif %}

        {% endfor %}


        <!-- 下一页按钮功能, 判断page.has_next的方法有没有下一页-->
        {% if page.has_next %}
        <a href="/note/list/?page={{page.next_page_number}}">下一页</a>
        {% else %}
        下一页
        {% endif %}

    </div>
</body>

</html>